<template>
	<view class="container">
		<view class="background-image">
			<!-- 导航栏 -->
			<uni-row>
				<uni-col :span="2"><uni-icons type="scan" size="30"></uni-icons></uni-col>
				<uni-col :span="20">
					<uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search"
						style="position: relative; bottom: 15px;" />
				</uni-col>
				<uni-col :span="2"><uni-icons type="chat" size="30"></uni-icons></uni-col>
			</uni-row>
			<!-- 轮播图 -->
			<uni-row>
				<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
					<swiper class="swiper-box" @change="change">
						<swiper-item v-for="(item ,index) in info" :key="index">
							<view class="swiper-item">
								{{item.content}}
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</uni-row>
			<!-- 分类 -->
			<uni-row>
				<uni-grid :column="5" :showBorder="false" :square="false">
					<uni-grid-item>
						<text class="text">文本</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">文本</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">文本</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">文本</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">文本</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">文本</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">文本</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">文本</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">文本</text>
					</uni-grid-item>
					<uni-grid-item>
						<text class="text">文本</text>
					</uni-grid-item>	
				</uni-grid>
			</uni-row>
			<!-- 卡片标签 -->
			<uni-row>
				<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
					<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
				</uni-card>
				<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
					<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
				</uni-card>
				<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
					<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
				</uni-card>
				<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
					<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
				</uni-card>
			</uni-row>
			<!-- tabbar -->
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				current: 0,
				mode: 'round',
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}


		},
		onPullDownRefresh() {
			this.arr = []
			setTimeout(() => {
				this.arr = ['前端', 'java', 'ui', '大数据']
				uni.stopPullDownRefresh()
			}, 1000);
		}
		,
		onLoad() {
			console.log("页面加载完成")
		}

	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}

	.background-image {
		background-image: url('/static/jd.jpg');
		/* 设置背景图片 */
		background-size: cover;
		/* 背景图片覆盖整个容器 */
		background-position: center;
		/* 背景图片居中 */
	}
</style>